<template>
  <gui-page class="gui-bg-white" :custom-footer="true" :custom-header="true" :full-page="true" :status-bar-class="['gui-bg-white']">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">录取数据</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gFixedTop>
      <view class="gui-bg-white">
        <!--        <view class="gui-dark-bg-level-1 gui-flex gui-row">-->
        <!--          <gui-search-->
        <!--            class="gui-flex1"-->
        <!--            clear-btn-->
        <!--            :custom-class="['gui-bg-gray', 'gui-margin-x']"-->
        <!--            :kwd="kwd"-->
        <!--            placeholder="请输入大学/专业"-->
        <!--            @confirm="submit"-->
        <!--            @inputting="inputting"-->
        <!--          />-->
        <!--          <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">-->
        <!--        <button class="gui-button-mini gui-primary-border-color gui-border-radius-full" :plain="true" type="default" @tap.stop="submit">-->
        <!--          <text class="gui-icons gui-primary-color gui-button-text-mini">&#xe604; 搜索</text>-->
        <!--        </button>-->
        <!--          </view>-->
        <!--        </view>-->
        <view class="gui-dark-bg-level-3 gui-padding gui-border-b" style="height: 138rpx">
          <view class="gui-text-small">
            <text>2024</text>
            <text class="gui-margin-x">重庆</text>
            <text>物理|化学|生物</text>
          </view>
          <view class="gui-text-small gui-margin-top-small">
            <text>成绩：580分</text>
            <text class="gui-margin-x">位次：35215</text>
            <text class="gui-icons gui-button-text-mini" @tap.stop="edit">&#xe69e;</text>
          </view>
        </view>
      </view>
    </template>
    <template #gBody>
      <view class="gui-bg-white gui-padding" style="margin-top: 130rpx">
        <!--   数据列表     -->
        <view
          v-for="item in 10"
          :key="item"
          class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow gui-border-b"
        >
          <!--    学校信息      -->
          <view class="gui-flex gui-rows gui-nowrap">
            <image
              class="gui-card-img"
              mode="aspectFill"
              src="https://images.unsplash.com/photo-1663524789648-90fbdf8c8b76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90"
            />
            <view class="gui-card-desc">
              <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                <text class="gui-card-name gui-primary-text">重庆大学【01】</text>
                <text class="gui-icons gui-color-gray" @tap.stop="openHelpModel">&#xe628;</text>
              </view>
              <text class="gui-card-text gui-block gui-third-text">重庆 公办 本科</text>
            </view>
          </view>
          <!--    专业信息      -->
          <view class="gui-card-body gui-flex gui-rows gui-nowrap">
            <view class="gui-border-radius-large gui-flex gui-align-items-center gui-card-img" style="height: 60rpx">
              <!--              <text class="gui-color-orange gui-text-small">100%</text>-->
            </view>
            <view class="gui-card-desc">
              <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                <text class="gui-card-name gui-primary-text">大数据专业</text>
              </view>
              <text class="gui-card-text gui-block gui-third-text">
                <text>专业代码 A01</text>
                <text class="gui-margin-x">学费5200</text>
                <text>学制4</text>
              </text>
              <text class="gui-card-text gui-block gui-third-text">
                <text>选科要求</text>
                <text class="gui-color-orange gui-margin-x">不限</text>
              </text>
              <text class="gui-card-text gui-block gui-third-text">
                <text class="gui-color-black">2023年</text>
                <text class="gui-margin-x">
                  <text>录取</text>
                  <text class="gui-color-black">9人</text>
                </text>
                <text>
                  <text>最低</text>
                  <text class="gui-color-black">585分/12350名</text>
                </text>
              </text>
              <text class="gui-card-text gui-block gui-third-text">
                <text class="gui-color-black">2024年</text>
                <text class="gui-margin-x">
                  <text>计划</text>
                  <text class="gui-color-black">12人</text>
                </text>
              </text>
            </view>
          </view>
          <view class="gui-flex gui-align-items-end gui-justify-content-end">
            <view class="gui-flex">
              <button
                class="gui-button-mini gui-primary-border-color gui-margin-x gui-border-radius-full"
                :plain="true"
                style="width: 150rpx"
                type="default"
                @tap.stop="other"
              >
                <text class="gui-primary-color gui-button-text-mini">其它专业</text>
              </button>
              <button
                class="gui-button-mini gui-bg-primary gui-noborder gui-border-radius-full"
                style="width: 100rpx"
                type="default"
                @tap.stop="filling"
              >
                <text class="gui-icons gui-color-white gui-button-text-mini">填报</text>
              </button>
            </view>
          </view>
        </view>
        <!-- 底部弹出 -->
        <gui-popup ref="modalRef" position="bottom" :z-index="9999">
          <view class="gui-bg-white" style="height: 78vh">
            <view class="gui-relative gui-img-in">
              <view class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">
                <!--    学校信息      -->
                <view class="gui-card-body gui-flex gui-rows gui-nowrap">
                  <image
                    class="gui-card-img"
                    mode="aspectFill"
                    src="https://images.unsplash.com/photo-1663524789648-90fbdf8c8b76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90"
                  />
                  <view class="gui-card-desc">
                    <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                      <text class="gui-card-name gui-primary-text">重庆大学</text>
                    </view>
                    <text class="gui-card-text gui-block gui-third-text">
                      <text>招生代码</text>
                      <text class="gui-color-black gui-margin-x">2105</text>
                    </text>
                  </view>
                </view>
                <!--        搜索        -->
                <view class="gui-dark-bg-level-1 gui-flex gui-row">
                  <gui-search
                    class="gui-flex1"
                    clear-btn
                    :custom-class="['gui-bg-gray', 'gui-margin-x']"
                    :kwd="kwd"
                    placeholder="请输入专业"
                    @confirm="submit"
                    @inputting="inputting"
                  />
                  <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">
                    <button class="gui-button-mini gui-bg-primary gui-noborder gui-border-radius-full" type="default" @tap.stop="submit">
                      <text class="gui-icons gui-color-white gui-button-text-mini">&#xe604; 搜索</text>
                    </button>
                  </view>
                </view>
                <!--    专业信息      -->
                <scroll-view :scroll-y="true" style="height: 61vh">
                  <view v-for="item in 10" :key="item" class="gui-border-t gui-margin-top-small">
                    <view class="gui-card-body gui-flex gui-rows gui-nowrap gui-margin-top-small">
                      <!--                      <view-->
                      <!--                        class="gui-border-radius-large gui-bg-orange3 gui-flex gui-align-items-center"-->
                      <!--                        style="height: 60rpx; padding: 15rpx"-->
                      <!--                      >-->
                      <!--                        <text class="gui-color-orange gui-text-small">100%</text>-->
                      <!--                      </view>-->
                      <view class="gui-card-desc">
                        <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                          <text class="gui-card-name gui-primary-text">大数据专业</text>
                        </view>
                        <text class="gui-card-text gui-block gui-third-text">
                          <text>专业代码 A01</text>
                          <text class="gui-margin-x">学费5200</text>
                          <text>学制4</text>
                        </text>
                        <text class="gui-card-text gui-block gui-third-text">
                          <text>选科要求</text>
                          <text class="gui-color-orange gui-margin-x">不限</text>
                        </text>
                        <text class="gui-card-text gui-block gui-third-text">
                          <text class="gui-color-black">2023年</text>
                          <text class="gui-margin-x">
                            <text>录取</text>
                            <text class="gui-color-black">9人</text>
                          </text>
                          <text>
                            <text>最低</text>
                            <text class="gui-color-black">585分/12350名</text>
                          </text>
                        </text>
                        <text class="gui-card-text gui-block gui-third-text">
                          <text class="gui-color-black">2024年</text>
                          <text class="gui-margin-x">
                            <text>计划</text>
                            <text class="gui-color-black">12人</text>
                          </text>
                        </text>
                      </view>
                    </view>
                    <view class="gui-flex gui-align-items-end gui-justify-content-end">
                      <view class="gui-flex">
                        <button
                          class="gui-button-mini gui-bg-primary gui-noborder gui-border-radius-full"
                          style="width: 100rpx"
                          type="default"
                          @tap.stop="filling"
                        >
                          <text class="gui-icons gui-color-white gui-button-text-mini">填报</text>
                        </button>
                      </view>
                    </view>
                  </view>
                  <view style="height: 100rpx" />
                </scroll-view>
              </view>
              <!-- 关闭按钮 -->
              <text class="gui-block modal-close gui-icons gui-absolute-rt" @tap.stop="closePopup">&#xe78a;</text>
            </view>
            <!-- iphone 底部适配 -->
            <gui-iphone-bottom :custom-class="['gui-bg-white', 'gui-dark-bg-level-3']" />
          </view>
        </gui-popup>
        <gui-popup ref="helpModelRef" :z-index="9999">
          <view class="gui-relative gui-box-shadow gui-img-in gui-bg-white gui-padding gui-border-radius">
            <view style="margin-top: 60rpx">
              <text class="gui-text-small">01、02、03代 表的意思分别是 国家重点学科、 省重点学科、不 是重点学科。</text>
            </view>
            <!-- 关闭按钮 -->
            <text class="gui-block modal-close gui-icons gui-absolute-rt" @tap.stop="closeHelpModel">&#xe78a;</text>
          </view>
        </gui-popup>
      </view>
    </template>
    <template #gFooter>
      <view class="gui-flex gui-justify-content-end gui-border-t gui-padding gui-bg-white">
        <view>
          <button class="gui-button-mini gui-bg-primary gui-noborder gui-border-radius-full" type="default" @tap.stop="aspiration">
            <text class="gui-icons gui-color-white gui-button-text-mini">我的志愿表</text>
          </button>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'

// 搜索
const kwd = ref<string>('')

const modalRef = ref<any>(null)
const helpModelRef = ref<any>(null)
const gradeData = ref<any>(null)

const edit = () => {
  console.log('修改')
  uni.navigateTo({
    url: '../grade/index',
  })
}
// 监听输入
const inputting = (e: any) => {
  kwd.value = e
}
// 提交
const submit = () => {
  console.log('搜索：')
}
// 志愿表
const aspiration = () => {
  console.log('志愿表：')
  uni.navigateTo({
    url: '../personal/table/index',
  })
}
// 填报
const filling = () => {
  console.log('填报：')
}
//  其它专业
const other = () => {
  console.log('其它专业：')
  modalRef.value.open()
}

// 弹窗
const openHelpModel = () => {
  helpModelRef.value.open()
}
const closeHelpModel = () => {
  helpModelRef.value.close()
}
const closePopup = () => {
  modalRef.value.close()
}
onLoad(() => {
  uni.$on('grade', (res) => {
    console.log('enroll来自grade页面的数据', res)
    gradeData.value = res
  })
})
onUnload(() => {
  uni.$off('grade')
})
</script>
<style scoped>
/deep/ .gui-masker {
  top: 350rpx !important;
}
/deep/ .select-title {
  width: 200rpx !important;
}
/* 卡片视图 */
.gui-card-view {
  padding: 25rpx;
  margin-top: 30rpx;
}
.gui-card-body {
  padding-bottom: 30rpx;
}
.gui-card-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 80rpx;
}
.gui-card-desc {
  width: 400rpx;
  margin-left: 25rpx;
  flex: 1;
}
.gui-card-name {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-right: 20rpx;
}
.gui-card-text {
  line-height: 40rpx;
  font-size: 24rpx;
}
.gui-card-footer {
  margin-top: 25rpx;
}
.gui-card-footer-item {
  width: 100rpx;
  text-align: center;
  flex: 1;
  line-height: 38rpx;
  font-size: 26rpx;
}
/* #ifndef APP-NVUE */
.gui-card-footer-item {
  display: block;
}
.gui-box-shadow {
  box-shadow: unset;
}
/* #endif */
.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
</style>
